<template>
    <div class="organization">
        <div class="header" @click="openPopup">
            <div class="header-content">
                <div class="name">{{selectDepartment.departmentName || '未选择'}}</div>
                <x-icon type="ios-arrow-right" fill="#fff" size="24" v-if="!show"></x-icon>
                <x-icon type="ios-arrow-down" fill="#fff" size="24" v-if="show"></x-icon>
                <!-- <span class="iconfont icon1">&#xe669;</span>
                <span class="iconfont icon2" v-if="show">&#xe669;</span> -->
            </div>
        </div>
        <popup v-model="show" :show-mask="false">
            <div class="main_wrapper" v-if="show">
                <ul id="demo">
                    <tree-item
                        class="item"
                        :item="treeData"
                        @get_department="getDepartment"
                        :selectDepartments="departmentSelect"
                    ></tree-item>
                </ul>
            </div>

            <div class="footer" v-if="show">
            <div class="btn" @click="cancel()">取消</div>
            <div class="btn" @click="confirm()">完成</div>
        </div>
        </popup>
    </div>
</template>
<script>
    import { Popup } from "vux";
    import TreeItem from "../../components/common/tree-item.vue"; 
    import TaskDao from "@/daos/task_dao";
    let _this = null;
    export default {
        name:'organization',
        components:{
            TreeItem,
            Popup
        },
        props: {
            selectDepartment:Object
        },
        data: function () {
            return {
            isOpen: false,
            show:false,
            curDepartment:{},
            department:{},
            treeData:{},
            departmentLevel:['1']
            }
        },
        computed: {
            isFolder: function () {
                return this.item.children && this.item.children.length
            }
        },
        mounted(){
            this.departmentSelect ={
                departmentName:'',
                id:''
            }
        },
        // watch: {
        //     selectDepartment: function(){
        //         this.curDepartment = this.selectDepartment;
        //         this.department = this.curDepartment;
        //         this.getDepartLevel();
        //     }
        // },
        methods: {
            getOrganization: function(){
                this.$http(this.$API.getMyOrganization,{},true).then((data)=>{
                   this.treeData = data
               })
            },
            //打开选择器
            openPopup: function () {
                this.show = true;
                this.departmentSelect ={
                    departmentLevel:this.departmentLevel,
                    id:this.curDepartment.id
                }
            },
            getDepartment: function(data){
                console.log('getdata',data)
                this.department = data;
                this.curDepartment = data;
            },
            getDepartLevel: function(){
                this.$http(this.$API.getDepartmentStruct,{departmentId:this.curDepartment.id},true).then((data)=>{
                    this.departmentLevel = data;
                })
            },
            confirm: function () {
                this.curDepartment = this.department
                if(JSON.stringify(this.curDepartment)!= "{}"){
                    this.$emit('department_select',this.curDepartment);
                }
                this.show = false;
            },
            cancel: function (){
              this.show = false;  
            }
        },
        created: function(){
            // _this = this;
            // let userInfo = JSON.parse(localStorage.getItem("user"));
            // this.curDepartment = {
            //     name:userInfo.deparment.departmentName,
            //     id:userInfo.deparment.id
            // };
            // this.$emit('department_select',this.curDepartment);
            this.getOrganization();
        }
    }
</script>
<style lang="less" scoped>
    @import '../../styles/iconfont.css';
    .organization .vux-popup-mask{
        display: none !important;
    }
    .organization{
        width: 100%;
        // padding-left: 10%;
    }
    .main_wrapper{
        color: #fff;
        width: 100%;
        z-index: 999;
        font-size: 16px;
    }
    .header {
    //   padding: 13px 0;
        width: 100%;
        font-size: 16px;
        // line-height: 16px;
        // color:#fff;
        padding: 0 !important;
        .header-content {
            padding: 0 !important;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: right;
            img {
            width: 5px;
            height: 11px;
            margin-left: 15px;
            }
        }
    }
    .footer {
        position: fixed;
        bottom: 0px;
        right: 0;
        width: 100vw;
        padding: 20px 0;
        background: #03061C;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index:999;
        .btn {
            background: #3967DC;
            border-radius: 4px;
            color:#fff;
            font-size: 16px;
            padding: 10px 35px !important;
        }
    }
    .iconfont{
        margin-right: 10px;
        font-size: 14px;
    }
    .vux-popup-dialog{
        height: calc(~"100vh - 40px")!important;
        overflow-y: scroll;
        top: 40px;
        padding-bottom: 84px;
        bottom: unset!important;
        background: #22233f!important;
        font-size: 14px;
        z-index: 9999!important;
    }
    .name{
        // width: 100%;
        // overflow: hidden !important;
        // text-overflow: ellipsis !important;
        // white-space: nowrap !important;
        // word-break: keep-all !important;
    }
    // .icon1{
    //     margin-left: 5px;
    // }
    // .icon2{
    //     margin-left: 5px;
    //     transform:rotate(90deg);
    //     -ms-transform:rotate(90deg); 	/* IE 9 */
    //     -moz-transform:rotate(90deg); 	/* Firefox */
    //     -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    //     -o-transform:rotate(90deg); 
    // }
</style>